<template>
	<view class="page">
		<!-- 顶部导航栏 -->
		<view class="topbar safe-area-top">
			<text class="title elderly-text-large">兴趣社群</text>
			<view class="search-btn elderly-pressable" @tap="handleSearch">
				<text class="search-icon">🔍</text>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view 
			class="main-content" 
			scroll-y 
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="handleRefresh"
		>
			<!-- 推荐社群 -->
			<view class="recommended-section">
				<text class="section-title elderly-text-large">推荐社群</text>
				<scroll-view class="recommended-scroll" scroll-x>
					<view class="recommended-list">
						<view 
							class="community-card interactive scale-in" 
							v-for="(community, index) in recommendedCommunities" 
							:key="community.id"
							:style="{ animationDelay: (index * 0.1) + 's' }"
							@tap="joinCommunity(community)"
						>
							<view class="community-cover" :style="{ background: community.gradient }">
								<text class="community-icon">{{community.icon}}</text>
							</view>
							<view class="community-info">
								<text class="community-name elderly-text">{{community.name}}</text>
								<text class="community-desc elderly-text">{{community.description}}</text>
								<view class="community-stats">
									<text class="member-count elderly-text">{{community.memberCount}}人</text>
									<text class="activity-level elderly-text">{{community.activityLevel}}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 我的社群 -->
			<view class="my-communities-section">
				<text class="section-title elderly-text-large">我的社群</text>
				<view class="communities-grid">
					<view 
						class="community-item interactive slide-up" 
						v-for="(community, index) in myCommunities" 
						:key="community.id"
						:style="{ animationDelay: (index * 0.1) + 's' }"
						@tap="enterCommunity(community)"
					>
						<view class="community-avatar" :style="{ background: community.gradient }">
							<text class="avatar-icon">{{community.icon}}</text>
						</view>
						<text class="community-title elderly-text">{{community.name}}</text>
						<view class="community-badge" v-if="community.newPosts > 0">
							<text class="badge-text">{{community.newPosts}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 分类浏览 -->
			<view class="categories-section">
				<text class="section-title elderly-text-large">分类浏览</text>
				<view class="categories-grid">
					<view 
						class="category-item interactive" 
						v-for="category in categories" 
						:key="category.id"
						@tap="browseCategory(category)"
					>
						<view class="category-icon" :style="{ background: category.gradient }">
							<text class="icon">{{category.icon}}</text>
						</view>
						<text class="category-name elderly-text">{{category.name}}</text>
						<text class="category-count elderly-text">{{category.communityCount}}个社群</text>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 搜索弹窗 -->
		<view class="search-modal" v-if="showSearchModal">
			<view class="modal-content">
				<view class="search-header">
					<input 
						class="search-input" 
						v-model="searchKeyword" 
						placeholder="搜索社群名称或关键词"
						placeholder-class="placeholder"
						@confirm="performSearch"
					/>
					<view class="close-btn elderly-pressable" @tap="closeSearchModal">
						<text class="close-icon">✕</text>
					</view>
				</view>
				<view class="search-results">
					<view 
						class="search-result-item interactive" 
						v-for="result in searchResults" 
						:key="result.id"
						@tap="joinCommunity(result)"
					>
						<view class="result-avatar" :style="{ background: result.gradient }">
							<text class="avatar-icon">{{result.icon}}</text>
						</view>
						<view class="result-info">
							<text class="result-name elderly-text">{{result.name}}</text>
							<text class="result-desc elderly-text">{{result.description}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
import { hapticLight, playSfx } from '@/utils/interaction.js'

export default {
	data() {
		return {
			refreshing: false,
			showSearchModal: false,
			searchKeyword: '',
			searchResults: [],
			
			// 推荐社群
			recommendedCommunities: [
				{
					id: 1,
					name: '书法爱好者',
					icon: '✍️',
					description: '一起练习书法，分享作品',
					memberCount: 128,
					activityLevel: '活跃',
					gradient: 'linear-gradient(135deg, #FF7E29, #FFD166)'
				},
				{
					id: 2,
					name: '广场舞团',
					icon: '💃',
					description: '每天一起跳广场舞',
					memberCount: 256,
					activityLevel: '很活跃',
					gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)'
				},
				{
					id: 3,
					name: '太极拳班',
					icon: '🥋',
					description: '修身养性，强身健体',
					memberCount: 89,
					activityLevel: '活跃',
					gradient: 'linear-gradient(135deg, #4A90E2, #6DD400)'
				},
				{
					id: 4,
					name: '摄影俱乐部',
					icon: '📸',
					description: '记录美好生活瞬间',
					memberCount: 156,
					activityLevel: '活跃',
					gradient: 'linear-gradient(135deg, #9D4EDD, #4A90E2)'
				}
			],
			
			// 我的社群
			myCommunities: [
				{
					id: 5,
					name: '老年大学',
					icon: '🎓',
					gradient: 'linear-gradient(135deg, #6DD400, #4A90E2)',
					newPosts: 3
				},
				{
					id: 6,
					name: '健康养生',
					icon: '❤️',
					gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					newPosts: 0
				},
				{
					id: 7,
					name: '旅游分享',
					icon: '✈️',
					gradient: 'linear-gradient(135deg, #FF7E29, #FFD166)',
					newPosts: 1
				}
			],
			
			// 分类
			categories: [
				{
					id: 'art',
					name: '文化艺术',
					icon: '🎨',
					gradient: 'linear-gradient(135deg, #FF7E29, #FFD166)',
					communityCount: 12
				},
				{
					id: 'sports',
					name: '运动健身',
					icon: '🏃',
					gradient: 'linear-gradient(135deg, #4A90E2, #6DD400)',
					communityCount: 8
				},
				{
					id: 'health',
					name: '健康养生',
					icon: '❤️',
					gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					communityCount: 15
				},
				{
					id: 'travel',
					name: '旅游出行',
					icon: '✈️',
					gradient: 'linear-gradient(135deg, #9D4EDD, #4A90E2)',
					communityCount: 6
				},
				{
					id: 'technology',
					name: '科技数码',
					icon: '📱',
					gradient: 'linear-gradient(135deg, #6DD400, #4A90E2)',
					communityCount: 4
				},
				{
					id: 'food',
					name: '美食烹饪',
					icon: '🍳',
					gradient: 'linear-gradient(135deg, #FFD166, #FF7E29)',
					communityCount: 10
				}
			]
		}
	},
	
	onLoad() {
		this.loadMyCommunities()
	},
	
	methods: {
		// 加载我的社群
		async loadMyCommunities() {
			// 模拟加载数据
			console.log('加载我的社群')
		},
		
		// 下拉刷新
		async handleRefresh() {
			this.refreshing = true
			hapticLight()
			await this.loadMyCommunities()
			this.refreshing = false
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		},
		
		// 搜索
		handleSearch() {
			hapticLight()
			this.showSearchModal = true
		},
		
		// 执行搜索
		performSearch() {
			if (!this.searchKeyword.trim()) return
			
			// 模拟搜索
			this.searchResults = this.recommendedCommunities.filter(community => 
				community.name.includes(this.searchKeyword) || 
				community.description.includes(this.searchKeyword)
			)
		},
		
		// 关闭搜索弹窗
		closeSearchModal() {
			this.showSearchModal = false
			this.searchKeyword = ''
			this.searchResults = []
		},
		
		// 加入社群
		joinCommunity(community) {
			hapticLight()
			uni.showModal({
				title: '加入社群',
				content: `确定要加入"${community.name}"吗？`,
				success: (res) => {
					if (res.confirm) {
						// 添加到我的社群
						const newCommunity = {
							...community,
							id: Date.now(),
							newPosts: 0
						}
						this.myCommunities.unshift(newCommunity)
						
						uni.showToast({
							title: '加入成功',
							icon: 'success'
						})
						
						playSfx('success')
					}
				}
			})
		},
		
		// 进入社群
		enterCommunity(community) {
			hapticLight()
			uni.navigateTo({
				url: `/pages/social/community-detail?id=${community.id}&name=${encodeURIComponent(community.name)}`
			})
		},
		
		// 浏览分类
		browseCategory(category) {
			hapticLight()
			uni.navigateTo({
				url: `/pages/social/category-communities?category=${category.id}&name=${encodeURIComponent(category.name)}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	background: $theme-bg;
}

/* 顶部导航栏 */
.topbar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-base $elderly-spacing-lg;
	background: $theme-card;
	backdrop-filter: blur(20rpx);
	border-bottom: 2rpx solid $elderly-border;
	z-index: 100;
	box-shadow: $elderly-shadow-sm;
}

.title {
	font-size: $elderly-font-xl;
	font-weight: 700;
	color: $elderly-text-primary;
	letter-spacing: 2rpx;
}

.search-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.search-btn:hover {
	background: $grad-sunrise;
	transform: scale(1.1);
}

.search-icon {
	font-size: $elderly-font-lg;
}

/* 主要内容区域 */
.main-content {
	height: calc(100vh - 200rpx);
	padding-bottom: 120rpx;
}

/* 推荐社群 */
.recommended-section {
	margin: $elderly-spacing-base;
}

.section-title {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: $elderly-spacing-base;
}

.recommended-scroll {
	white-space: nowrap;
}

.recommended-list {
	display: flex;
	gap: $elderly-spacing-base;
}

.community-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
	min-width: 280rpx;
}

.community-card:hover {
	transform: translateY(-4rpx);
	box-shadow: $elderly-shadow-lg;
}

.community-cover {
	width: 100%;
	height: 120rpx;
	border-radius: $elderly-radius-base;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $elderly-spacing-sm;
}

.community-icon {
	font-size: $elderly-font-xxl;
}

.community-info {
	text-align: center;
}

.community-name {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.community-desc {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
	margin-bottom: $elderly-spacing-xs;
}

.community-stats {
	display: flex;
	justify-content: space-between;
}

.member-count, .activity-level {
	color: $elderly-text-secondary;
	font-size: $elderly-font-xs;
}

/* 我的社群 */
.my-communities-section {
	margin: $elderly-spacing-base;
}

.communities-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: $elderly-spacing-base;
}

.community-item {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
	position: relative;
}

.community-item:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.community-avatar {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $elderly-spacing-sm;
}

.avatar-icon {
	font-size: $elderly-font-xl;
}

.community-title {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.community-badge {
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	background: $theme-coral;
	border-radius: 12rpx;
	padding: 4rpx 8rpx;
}

.badge-text {
	color: #FFFFFF;
	font-size: $elderly-font-xs;
	font-weight: 600;
}

/* 分类浏览 */
.categories-section {
	margin: $elderly-spacing-base;
}

.categories-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: $elderly-spacing-base;
}

.category-item {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
}

.category-item:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.category-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $elderly-spacing-sm;
}

.icon {
	font-size: $elderly-font-xl;
}

.category-name {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.category-count {
	color: $elderly-text-secondary;
	font-size: $elderly-font-xs;
}

/* 搜索弹窗 */
.search-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	z-index: 1000;
	padding-top: 200rpx;
}

.modal-content {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	margin: $elderly-spacing-lg;
	width: 90%;
	max-width: 600rpx;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
}

.search-header {
	display: flex;
	align-items: center;
	padding: $elderly-spacing-lg;
	border-bottom: 2rpx solid $elderly-border;
}

.search-input {
	flex: 1;
	height: 80rpx;
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	padding: 0 $elderly-spacing-base;
	font-size: $elderly-font-base;
	color: $elderly-text-primary;
	border: none;
}

.placeholder {
	color: $elderly-text-secondary;
}

.close-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $theme-warm-gray;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: $elderly-spacing-sm;
}

.close-icon {
	font-size: $elderly-font-lg;
	color: $elderly-text-secondary;
}

.search-results {
	flex: 1;
	padding: $elderly-spacing-lg;
	overflow-y: auto;
}

.search-result-item {
	display: flex;
	align-items: center;
	padding: $elderly-spacing-base;
	border-radius: $elderly-radius-base;
	transition: all 0.2s ease;
	margin-bottom: $elderly-spacing-sm;
}

.search-result-item:hover {
	background: $theme-warm-gray;
}

.result-avatar {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: $elderly-spacing-sm;
}

.result-info {
	flex: 1;
}

.result-name {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
}

.result-desc {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
}

/* 安全区域适配 */
.safe-area-top {
	padding-top: env(safe-area-inset-top);
}
</style>

